// createRouter 用来创建路由对象用的

/*
  路由模式：
  1. createWebHistory 路由模式(History)
    History： 前面用的是 / 开头，一般是要配合后端进行使用的，容易产生 404 页面
              路径比较美观
  2. createWebHashHistory 路由模式(Hash)
    Hash： 前面用的是 # 开头，无需后端配合使用，兼容性会略好

*/
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 导入 home 组件
import HomeView from '../views/HomeView.vue'

// 路由规则配置
const routes = [
  {
    // 访问时的路由路径，用来跳转页面用的
    path: '/',
    // 命名路由，路由的别名，也可以用来跳转页面
    name: 'home',
    // 当访问到对应的路由路径后需要展示的组件页面
    component: HomeView
  },
  // {
  //   path: '/about',
  //   name: 'about',
  // route level code-splitting
  // this generates a separate chunk (About.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  // 路由懒加载，需要的时候在来加载
  // 对于一些不确定是否立即需要展示的页面，我们可以使用懒加载
  //   component: () => import('../views/AboutView.vue')
  // }
]

// 创建路由实例
const router = createRouter({
  // 配置路由模式，可以通过切换 createWebHashHistory 方法进行配置
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // 配置路由规则
  routes
})

// 导出路由
export default router
